import { Routes, Route, Navigate } from "react-router-dom";
import { lazy, Suspense } from "react";

const Home = lazy(() => import("./pages/home/Index"));
const Detail = lazy(() => import("./pages/detail/Index"));
const City = lazy(() => import("./pages/city/Index"));
const NotFound = lazy(() => import("./pages/404/Index"));

const Movies = lazy(() => import("./pages/home/movies/Index"));
const Video = lazy(() => import("./pages/home/video/Index"));
const Mini = lazy(() => import("./pages/home/mini/Index"));
const Show = lazy(() => import("./pages/home/show/Index"));
const Mine = lazy(() => import("./pages/home/mine/Index"));

const App = () => {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Routes>
        <Route path="/" element={<Navigate to="/home"></Navigate>}></Route>
        <Route path="/home" element={<Home />}>
          <Route
            index
            element={<Navigate to="/home/movies"></Navigate>}
          ></Route>
          <Route path="movies" element={<Movies />}></Route>
          <Route path="video" element={<Video />}></Route>
          <Route path="mini" element={<Mini />}></Route>
          <Route path="show" element={<Show />}></Route>
          <Route path="mine" element={<Mine />}></Route>
        </Route>
        <Route path="/detail" element={<Detail />}></Route>
        <Route path="/city" element={<City />}></Route>
        <Route path="*" element={<NotFound />}></Route>
      </Routes>
    </Suspense>
  );
};

export default App;
